<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> house page </title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<div id="app">
    <el-table
            :data="houses"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
    >

        <el-table-column
                type="selection"
                width="55">
        </el-table-column>

        <el-table-column
                align="center"
                prop="id"
                label="编号"
                width="50">
        </el-table-column>

        <el-table-column
                align="center"
                prop="numbers"
                label="房号"
                width="50">
        </el-table-column>

        <el-table-column
                align="center"
                prop="status"
                label="状态"
                width="80">
            <template slot-scope="scope">
                <el-tag
                        :type="scope.row.status === 0 ? 'primary' : 'success'"
                        disable-transitions>{{scope.row.status === 0 ? "未住" :"入住"}}
                </el-tag>
            </template>
        </el-table-column>

        <el-table-column
                align="center"
                prop="intoDate"
                label="入住时间"
                width="180">
        </el-table-column>

        <el-table-column
                align="center"
                prop="building.numbers"
                label="楼栋"
                width="80">
        </el-table-column>

        <el-table-column
                align="center"
                prop="remarks"
                label="备注"
                width="180">
        </el-table-column>

        <el-table-column
                align="center"
                prop="area"
                label="面积"
                width="90">
        </el-table-column>

        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>

    </el-table>
    <!--
          分页操作:

           前端: 组件
               <el-pagination> 组件标签
                      @size-change      页面大小的触发事件(触发函数(handleSizeChange))
                      @current-change   当前页面变化触发事件(触发函数(handleCurrentChange))
                      :current-page     当前第几页
                      :page-sizes       每页大小
                      :page-size        每页大小
                      :current-page     当前第几页
                      layout            分页布局
                      :total            一共多少条数据
                      服务器需要给我们返回的数据:
                      total   总数
                      builds  每页展示的数据
                      后端需要哪些数据:
                      currentPage:需要当前的页
                      pageSize:   需要每页的数据大小
           后端: 插件
               01 依赖
               02 配置
      -->
    </el-table>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>


    <!--    编辑的 dialog -->
    <el-dialog
            title="编辑房屋"
            :visible.sync="dialogVisible"
            width="45%"
            @close="handleCloseLintener"
            :before-close="handleClose">

        <el-form ref="house" label-width="80px">
            <el-form-item label="房屋编号">
                <el-input v-model="house.numbers"></el-input>
            </el-form-item>

<!--            <el-form-item label="状态">-->
<!--                <el-input v-model="house.status"></el-input>-->
<!--            </el-form-item>-->

            <el-form-item label="状态">
                <el-radio v-model="status" label="0">未住</el-radio>
                <el-radio v-model="status" label="1">以住</el-radio>
            </el-form-item>

            <el-form-item label="时间">
                <el-date-picker
                        v-model="house.intoDate"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期">
                </el-date-picker>

            </el-form-item>

            <!--     house.buildingId  -->
            <el-form-item label="楼栋号">
                <el-select v-model="house.buildingId" placeholder="请选择所属楼宇">
                    <!--
                        label  文本显示
                        value  提交的值

                        v-model 会自动把  v-model="house.buildingId" 和  el-option下面的 value="build.id 进行绑定
                    -->
                    <el-option
                            v-for="build in builds"
                            :key="build.id"
                            :label="build.numbers"
                            :value="build.id">
                    </el-option>

                </el-select>
            </el-form-item>

            <el-form-item label="备注">
                <el-input v-model="house.remarks"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmitUpdate">添加</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


</div>

<script>

    let app = new Vue({
        el: "#app",
        data: {
            houses: [],
            currentPage: 1,
            pageSizes: [2, 3, 4],
            pageSize: 2,
            total: 0,
            dialogVisible: false,
            house: {},
            builds: [],
            status:"1"
        },
        methods: {

            handleCloseLintener() {
                this.house = {};
            },
            handleClose() {
                this.dialogVisible = false;
            },
            //提交数据的操作
            onSubmitUpdate() {
                console.log(this.house);
                axios({
                    method: "PUT",
                    url: "http://localhost:8080/house",
                    data: this.house
                }).then(resp => {
                    //1判断
                    //2 提示
                    //3.关闭
                    //4 刷新
                    if (resp.data.code = 100000) {
                        alert(resp.data.msg);
                        this.dialogVisible = false;
                        this.findAll(this.currentPage, this.pageSize);
                    }
                })
            },
            // 页面大小发生变化执行从方法
            handleSizeChange(val) {
                this.pageSize = val;
                this.findAll(this.currentPage, this.pageSize);
            },
            // 当前的 currentPage 发生变化 执行的函数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.findAll(this.currentPage, this.pageSize);
            },
            //编辑操作
            handleEdit(index, row) {
                // 把 row json字符串
                let str = JSON.stringify(row);
                // 重写把字符串转成 house
                this.house = JSON.parse(str);

                this.status = this.house.status;
                // 编辑弹出框
                this.dialogVisible = true;
            },

            handleDelete() {
            },
            handleSelectionChange() {
            },
            //查询所有的数据
            findAll(currentPage, pageSize) {
                axios({
                    method: "GET",
                    url: "http://localhost:8080/house/list",
                    params: {
                        currentPage: currentPage,
                        pageSize: pageSize
                    }
                }).then(resp => {
                    console.log(resp.data)
                    this.houses = resp.data.data.data;
                    this.total = resp.data.data.total;
                })
            },
            findBuild() {
                axios({
                    method: "GET",
                    url: "http://localhost:8080/building/all",
                }).then(resp => {
                    console.log(resp.data);
                    this.builds = resp.data.data;
                })
            }
        },
        created() {

            this.findAll(1, 2);
            this.findBuild();
        }
    })

</script>

</body>
</html>